<script setup lang="ts">
import { ref, reactive, inject } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getAlarmDataApi,
  updateAlarmDataApi
} from '@/api/alarm'
// props

// 定义变量
const AlarmConfigVisible = ref(false)
// 获取的配置数据
const alarmData = reactive({
  infrared1: '0',
  infrared2: '0',
  dust1: '0',
  dust2: '0',
  O21: '0',
  O22: '0',
  SO21: '0',
  SO22: '0',
  CO1: '0',
  CO2: '0',
  CH41: '0',
  CH42: '0',
  smoke1: '0',
  smoke2: '0',
  flamCoal1: '0',
  flamCoal2: '0'
})
// 红外配置数据
const infraredAlarm = reactive({
  firstdary: '',
  secondary: '',
  level: '1L',
  id: ''
})
// 粉尘
const dustAlarm = reactive({
  firstdary: '',
  secondary: '', 
  level: '',
  id: ''
})
// 氧气
const O2Alarm = reactive({
  firstdary: '',
  secondary: '',
  level: '',
  id: ''
})
// 氧气
const SO2Alarm = reactive({
  firstdary: '',
  secondary: '',
  level: '',
  id: ''
})
// 一氧化碳
const COdAlarm = reactive({
  firstdary: '',
  secondary: '',
  level: '',
  id: ''
})
// 甲烷
const CH4Alarm = reactive({
  firstdary: '',
  secondary: '',
  level: '',
  id: ''
})
// 烟感
const smokeAlarm = reactive({
  firstdary: '',
  secondary: '',
  level: '',
  id: ''
})
// 明火煤
const flameAlarm = reactive({
  firstdary: '',
  secondary: '',
  level: '',
  id: ''
})

// 是否有不正确的值
const isViolation = ref(false)

// 定义方法
// 展示弹框
const showAlarmConfig = async () => {
  // let data = {
  //   type: 7,
  //   minValue1: 1500,
  //   minValue2: 1500,
  //   minValue3: 1500,
  //   maxValue1: 1000,
  //   maxValue2: 1000,
  //   maxValue3: 1000
  // }
  // let res1 = await addAlarmDataApi(data)
  // if (res1.success) {
  //   return
  // }
  let res = await getAlarmDataApi()
  if (res.code === -1) {
    ElMessage({
      // message: `${res.message}`,
      message: '网络请求中断获取数据错误！',
      type: 'warning'
    })
    return
  }
  console.log('展示报警配置------>', res)
  res.forEach( (item:any) => {
    switch (item.typeCode) {
    case 'CO':
      COdAlarm.firstdary = item.maxValue
      COdAlarm.secondary = item.minValue
      alarmData.CO1 = item.maxValue
      alarmData.CO2 = item.minValue
      COdAlarm.id = item.id
      break
    case 'CH4':
      // CH4Alarm.firstdary = item.maxValue2
      // CH4Alarm.secondary = item.maxValue1
      CH4Alarm.firstdary = item.maxValue
      CH4Alarm.secondary = item.minValue
      alarmData.CH41 = item.maxValue
      alarmData.CH42 = item.minValue
      CH4Alarm.level = item.level
      CH4Alarm.id = item.id
      break
    case 'FOG':
      dustAlarm.firstdary = item.maxValue
      dustAlarm.secondary = item.minValue
      alarmData.dust1 = item.maxValue
      alarmData.dust2 = item.minValue
      dustAlarm.id = item.id
      break
    case 'SMOKE':
      smokeAlarm.firstdary = item.maxValue
      smokeAlarm.secondary = item.minValue
      alarmData.smoke1 = item.maxValue
      alarmData.smoke2 = item.minValue
      smokeAlarm.id = item.id
      break
    case 'O2':
      O2Alarm.firstdary = item.minValue1
      O2Alarm.secondary = item.minValue2
      alarmData.O21 = item.minValue1
      alarmData.O22 = item.minValue2
      O2Alarm.id = item.id
      break
    case 'SO2':
      SO2Alarm.firstdary = item.maxValue
      SO2Alarm.secondary = item.minValue
      alarmData.SO21 = item.maxValue
      alarmData.SO22 = item.minValue
      SO2Alarm.id = item.id
      break
    case 'Infrared':
      infraredAlarm.firstdary = item.maxValue
      infraredAlarm.secondary = item.minValue
      alarmData.infrared1 = item.maxValue
      alarmData.infrared2 = item.minValue
      infraredAlarm.id = item.id
      break
    // case 7:
    //   flameAlarm.firstdary = item.maxValue2
    //   flameAlarm.secondary = item.maxValue1
    //   alarmData.flamCoal1 = item.maxValue2
    //   alarmData.flamCoal2 = item.maxValue1
    //   flameAlarm.id = item.id
    //   break
    }
  })
  console.log('展示报警配置------>', res)
  AlarmConfigVisible.value = true
}

// 粉尘验证
const numVerification = (target:number, type:number) => {
  console.log('验证的目标-------->', target)
  switch (target) {
  case 1:
    if (COdAlarm.secondary && COdAlarm.firstdary && (~~COdAlarm.secondary - ~~COdAlarm.firstdary) >= 0) {
      ElMessage({
        message: '二级阈值不能高于一级阈值！！！',
        type: 'warning'
      })
      isViolation.value = true
      if (type) {
        COdAlarm.secondary = alarmData.CO2
      } else {
        COdAlarm.firstdary = alarmData.CO1
      }
    } else {
      isViolation.value = false
    }
    break
  case 2:
    if (CH4Alarm.secondary && CH4Alarm.firstdary && (~~CH4Alarm.secondary - ~~CH4Alarm.firstdary) >= 0) {
      ElMessage({
        message: '二级阈值不能高于一级阈值！！！',
        type: 'warning'
      })
      isViolation.value = true
      if (type) {
        CH4Alarm.secondary = alarmData.CH42
      } else {
        CH4Alarm.firstdary = alarmData.CH41
      }
    } else {
      isViolation.value = false
    }
    break
  case 3:
    if (dustAlarm.secondary && dustAlarm.firstdary && (~~dustAlarm.secondary - ~~dustAlarm.firstdary) >= 0) {
      ElMessage({
        message: '二级阈值不能高于一级阈值！！！',
        type: 'warning'
      })
      isViolation.value = true
      if (type) {
        dustAlarm.secondary = alarmData.dust2
      } else {
        dustAlarm.firstdary = alarmData.dust1
      }
    } else {
      isViolation.value = false
    }
    break
  case 4:
    if (smokeAlarm.secondary && smokeAlarm.firstdary && (~~smokeAlarm.secondary - ~~smokeAlarm.firstdary) >= 0) {
      ElMessage({
        message: '二级阈值不能高于一级阈值！！！',
        type: 'warning'
      })
      isViolation.value = true
      if (type) {
        smokeAlarm.secondary = alarmData.smoke2
      } else {
        smokeAlarm.firstdary = alarmData.smoke1
      }
    } else {
      isViolation.value = false
    }
    break
  case 5:
    console.log('数值--->', SO2Alarm)
    if (SO2Alarm.secondary && SO2Alarm.firstdary && (~~SO2Alarm.secondary - ~~SO2Alarm.firstdary) >= 0) {
      ElMessage({
        message: '二级阈值不能低于一级阈值！！！',
        type: 'warning'
      })
      isViolation.value = true
      if (type) {
        SO2Alarm.secondary = alarmData.SO22
      } else {
        SO2Alarm.firstdary = alarmData.SO21
      }
    } else {
      isViolation.value = false
    }
    console.log('数值bbbb--->', SO2Alarm)
    break
  case 6:
    // console.log('红外验证---->', infraredAlarm.secondary, infraredAlarm.firstdary, ()
    if (infraredAlarm.secondary && infraredAlarm.firstdary && (~~infraredAlarm.secondary - ~~infraredAlarm.firstdary) >= 0) {
      ElMessage({
        message: '二级阈值不能高于一级阈值！！！',
        type: 'warning'
      })
      isViolation.value = true
      if (type) {
        infraredAlarm.secondary = alarmData.infrared2
      } else {
        infraredAlarm.firstdary = alarmData.infrared1
      }
    } else {
      isViolation.value = false
    }
    break
  case 7:
    if (O2Alarm.secondary && O2Alarm.firstdary && (~~O2Alarm.secondary - ~~O2Alarm.firstdary) <= 0) {
      ElMessage({
        message: '二级阈值不能低于一级阈值！！！',
        type: 'warning'
      })
      isViolation.value = true
      if (type) {
        O2Alarm.secondary = alarmData.O22
      } else {
        O2Alarm.firstdary = alarmData.O21
      }
    } else {
      isViolation.value = false
    }
    break
  }
  // if (type) {
  //   ElMessage({
  //     message: '红外报警修改失败！！！',
  //     type: 'warning'
  //   })
  // } else {
  //   ElMessage({
  //     message: '红外报警修改失败！！！',
  //     type: 'warning'
  //   })
  // }
  
}

// 取消函数
const cancellation = () => {
  infraredAlarm.firstdary = ''
  infraredAlarm.secondary = ''
  dustAlarm.firstdary = ''
  dustAlarm.secondary = ''
  O2Alarm.firstdary = ''
  O2Alarm.secondary = ''
  COdAlarm.firstdary = ''
  COdAlarm.secondary = ''
  CH4Alarm.firstdary = ''
  CH4Alarm.secondary = ''
  flameAlarm.firstdary = ''
  flameAlarm.secondary = ''
  AlarmConfigVisible.value = false
}

// 确认函数
const confirm = async () => {
  if (isViolation.value) return
  let infraredRes
  let dustRes
  let SO2dRes
  let CORes
  let Ch4Res
  let smokeRes
  console.log('CO提交数据------>', COdAlarm.firstdary, (COdAlarm.secondary + '') === '0', COdAlarm.secondary)
  if (COdAlarm.firstdary && ((COdAlarm.secondary + '') === '0' || COdAlarm.secondary)) {
    let coData = [
      {
        typeCode: 'CO',
        maxValue: parseInt(COdAlarm.firstdary),
        minValue: parseInt(COdAlarm.secondary),
        id: COdAlarm.id,
        // level: COdAlarm.level
        level: '1L'
      }
    ]
    CORes = await updateAlarmDataApi(coData)
  }
  if (CH4Alarm.firstdary && ((CH4Alarm.secondary + '') === '0' || CH4Alarm.secondary)) {
    let ch4Data = [ {
      typeCode: 'CH4',
      maxValue: parseInt(CH4Alarm.firstdary),
      minValue: parseInt(CH4Alarm.secondary),
      level: CH4Alarm.level,
      id: CH4Alarm.id
    } ]
    Ch4Res = await updateAlarmDataApi(ch4Data)
  }
  if (dustAlarm.firstdary && ((dustAlarm.secondary + '') === '0' || dustAlarm.secondary)) {
    let dustData = [
      {
        typeCode: 'FOG',
        maxValue: parseInt(dustAlarm.firstdary),
        minValue: parseInt(dustAlarm.secondary),
        // level: dustAlarm.level,
        id: dustAlarm.id,
        level: '1L'
      }
    ]
    dustRes = await updateAlarmDataApi(dustData)
  }
  if (smokeAlarm.firstdary && ((smokeAlarm.secondary + '') === '0' || smokeAlarm.secondary)) {
    let dustData = [
      {
        typeCode: 'SMOKE',
        maxValue: parseInt(smokeAlarm.firstdary),
        minValue: parseInt(smokeAlarm.secondary),
        // level: smokeAlarm.level,
        level: '1L',
        id: smokeAlarm.id
      }
    ]
    smokeRes = await updateAlarmDataApi(dustData)
  }
  if (SO2Alarm.firstdary && ((SO2Alarm.secondary + '') === '0' || SO2Alarm.secondary)) {
    let so2Data = [
      {
        typeCode: 'SO2',
        minValue: parseInt(SO2Alarm.secondary),
        maxValue: parseInt(SO2Alarm.firstdary),
        // level: SO2Alarm.level,
        level: '1L',
        id: SO2Alarm.id
      }
    ]
    SO2dRes = await updateAlarmDataApi(so2Data)
  }
  if (infraredAlarm.firstdary && ((infraredAlarm.secondary + '') === '0' || infraredAlarm.secondary)) {
    let infData = [
      {
        typeCode: 'Infrared',
        maxValue: parseInt(infraredAlarm.firstdary),
        minValue: parseInt(infraredAlarm.secondary),
        id: infraredAlarm.id,
        level: infraredAlarm.level
      }
    ]
    infraredRes = await updateAlarmDataApi(infData)
  }
  
  if ((infraredRes) && (dustRes) && (SO2dRes) && (smokeRes) && (CORes) && (Ch4Res) ) {
    ElMessage({
      message: '修改成功！！！',
      type: 'success'
    })
    getAlarmData()
  } else {
    ElMessage({
      message: '修改失败！！！',
      type: 'warning'
    })
  }
  AlarmConfigVisible.value = false
}

const getAlarmData = inject('getAlarmData') as () => {}

// 向外暴露的函数
defineExpose({
  showAlarmConfig
})
</script>

<template>
  <el-dialog
    v-model="AlarmConfigVisible"
    class="alarm-dialog"
  >
    <template #header>
      <div class="alarm-header-box">
        <div class="title">
          报警配置
        </div>
      </div>
    </template>
    <div class="form-box">
      <div class="alarm-item first-item">
        <div class="form-title">
          红外报警
        </div>
        <div class="input-box">
          <el-input
            v-model="infraredAlarm.firstdary"
            class="first-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(6, 0)"
          >
            <template #prefix>
              <div>一级</div>
            </template>
          </el-input>
          <el-input
            v-model="infraredAlarm.secondary"
            class="second-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(6, 1)"
          >
            <template #prefix>
              <div>二级</div>
            </template>
          </el-input>
        </div>
      </div>
      <div class="alarm-item">
        <div class="form-title">
          粉尘报警
        </div>
        <div class="input-box">
          <el-input
            v-model="dustAlarm.firstdary"
            class="first-input"
            type="number"
            :min="dustAlarm.secondary"
            placeholder="请输入数值"
            @blur="numVerification(3,0)"
          >
            <template #prefix>
              <div>一级</div>
            </template>
          </el-input>
          <el-input
            v-model="dustAlarm.secondary"
            class="second-input"
            type="number"
            min="0"
            :max="dustAlarm.firstdary"
            placeholder="请输入数值"
            @blur="numVerification(3,1)"
          >
            <template #prefix>
              <div>二级</div>
            </template>
          </el-input>
        </div>
      </div>
      <div class="alarm-item">
        <div class="form-title">
          二氧化硫报警
        </div>
        <div class="input-box">
          <el-input
            v-model="SO2Alarm.firstdary"
            class="first-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(5,0)"
          >
            <template #prefix>
              <div>一级</div>
            </template>
          </el-input>
          <el-input
            v-model="SO2Alarm.secondary"
            class="second-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(5,1)"
          >
            <template #prefix>
              <div>二级</div>
            </template>
          </el-input>
        </div>
      </div>
      <div class="alarm-item">
        <div class="form-title">
          一氧化碳报警
        </div>
        <div class="input-box">
          <el-input
            v-model="COdAlarm.firstdary"
            class="first-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(1,0)"
          >
            <template #prefix>
              <div>一级</div>
            </template>
          </el-input>
          <el-input
            v-model="COdAlarm.secondary"
            class="second-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(1,1)"
          >
            <template #prefix>
              <div>二级</div>
            </template>
          </el-input>
        </div>
      </div>
      <div class="alarm-item">
        <div class="form-title">
          甲烷报警
        </div>
        <div class="input-box">
          <el-input
            v-model="CH4Alarm.firstdary"
            class="first-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(2,0)"
          >
            <template #prefix>
              <div>一级</div>
            </template>
          </el-input>
          <el-input
            v-model="CH4Alarm.secondary"
            class="second-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(2,1)"
          >
            <template #prefix>
              <div>二级</div>
            </template>
          </el-input>
        </div>
      </div>
      <div class="alarm-item">
        <div class="form-title">
          烟感报警
        </div>
        <div class="input-box">
          <el-input
            v-model="smokeAlarm.firstdary"
            class="first-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(4, 0)"
          >
            <template #prefix>
              <div>一级</div>
            </template>
          </el-input>
          <el-input
            v-model="smokeAlarm.secondary"
            class="second-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(4, 1)"
          >
            <template #prefix>
              <div>二级</div>
            </template>
          </el-input>
        </div>
      </div>
      <!-- <div class="alarm-item">
        <div class="form-title">
          明火煤报警
        </div>
        <div class="input-box">
          <el-input
            v-model="flameAlarm.firstdary"
            class="first-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(203, 0)"
          >
            <template #prefix>
              <div>一级</div>
            </template>
          </el-input>
          <el-input
            v-model="flameAlarm.secondary"
            class="second-input"
            type="number"
            min="0"
            placeholder="请输入数值"
            @blur="numVerification(203, 1)"
          >
            <template #prefix>
              <div>二级</div>
            </template>
          </el-input>
        </div>
      </div> -->
      <!-- <div class="flame-alarm">
        <div class="form-title">
          明火煤报警
        </div>
      </div>
      <div class="flame-body">
        <div
          class="flame-item"
          style="margin-top: 0;"
        >
          <div class="flame-title">
            卸煤沟1
          </div>
          <el-input
            v-model="flameAlarm.value1"
            class="flame-input"
            type="number"
            min="0"
            placeholder="请输入数值"
          />
          <div
            v-if="false"
            class="flame-checkbox"
          >
            <div>
              是否关联消防
            </div>
            <input
              v-model="flameAlarm.check1"
              type="checkbox"
            >
          </div>
        </div>
        <div class="flame-item">
          <div class="flame-title">
            卸煤沟2
          </div>
          <el-input
            v-model="flameAlarm.value2"
            class="flame-input"
            type="number"
            min="0"
            placeholder="请输入数值"
          />
          <div
            v-if="false"
            class="flame-checkbox"
          >
            <div>
              是否关联消防
            </div>
            <input
              v-model="flameAlarm.check2"
              type="checkbox"
            >
          </div>
        </div>
        <div class="flame-item">
          <div class="flame-title">
            取煤口
          </div>
          <el-input
            v-model="flameAlarm.value3"
            class="flame-input"
            type="number"
            min="0"
            placeholder="请输入数值"
          />
          <div
            v-if="false"
            class="flame-checkbox"
          >
            <div>
              是否关联消防
            </div>
            <input
              v-model="flameAlarm.check3"
              type="checkbox"
            >
          </div>
        </div>
      </div> -->
    </div>
    <div class="btn-box">
      <div
        class="cancellation-btn"
        @click="cancellation"
      />
      <div
        class="confirm-btn"
        @click="confirm"
      />
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.form-box {
  .alarm-item {
    margin-top: 14px;
    margin-left: 10px;
    .form-title {
      width: 106px;
      height: 20px;
      color: #4e5969;
      font-weight: 500;
      font-size: 14px;
      font-family: PingFang,sans-serif;
      line-height: 16px;
      background-clip: text;
    }
    .input-box {
      display: flex;
      margin-top: 10px;
      .first-input,
      .second-input {
        width: 260px;
        height: 42px;
        background: #f7f8fa;
        border: 1px solid #c9cdd4;
        border-radius: 2px;
        opacity: 1;
      }
      .second-input {
        margin-left: 20px;
      }
    }
  }
  .first-item {
    margin-top: 0;
  }
  .flame-alarm {
    margin-top: 14px;
    margin-left: 10px;

    /* border: 1px solid red; */
    .form-title {
      width: 106px;
      height: 20px;
      color: #4e5969;
      font-weight: 500;
      font-size: 14px;
      font-family: PingFang,sans-serif;
      line-height: 16px;
      background-clip: text;
    }
  }
  .flame-body {
      width: 540px;
      height: 152px;
      margin-top: 10px;
      margin-left: 10px;
      padding-top: 16px;
      background: #f7f8fa;

      /* border: 1px solid red; */
      border-radius: 2px;
      .flame-item {
        display: flex;
        height: 32px;
        margin-top: 20px;

        /* border: 1px solid red; */
        .flame-title {
          width: 56px;
          height: 32px;
          margin-left: 16px;
          color: #a9aeb8;
          font-weight: 400;
          font-size: 14px;
          font-family: PingFang,sans-serif;
          line-height: 32px;
          background-clip: text;
        }
        .flame-input {
          width: 188px;
          height: 32px;
          background: #eeeff3;
          border: 1px solid #c9cdd4;
          border-radius: 2px;
          opacity: 1;
        }
        .flame-checkbox {
          display: flex;
          width: 124px;
          height: 32px;
          margin-left: 34px;
          color: #4e5969;
          font-weight: 500;
          font-size: 14px;
          font-family: PingFang,sans-serif;
          line-height: 32px;
          background-clip: text;

          /* border: 1px solid blue; */
          > input {
            margin-top: 6px;
            border: 1px solid green;
          }
        }
      }
    }
}
</style>
<style lang="scss">
.alarm-dialog {
  width: 600px;
  height: 650px;
  .alarm-header-box {
    display: flex;
    .title {
      width: 120px;
      height: 28px;
      color: #4e5969;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang,sans-serif;
      line-height: 23px;
      background-clip: text;
    }
    .position-name {
      width: 252px;
      height: 28px;
      margin-left: 24px;
      color: #2191ff;
      font-weight: 600;
      font-size: 20px;
      font-family: PingFang,sans-serif;
      line-height: 23px;
      background-clip: text;
    }
  }
  .el-dialog__body {
    padding-top: 5px;
  }
  .btn-box {
    display: flex;
    flex-direction: row;
    margin-top: 20px;

    /* border: 1px solid red; */
    .confirm-btn {
      width: 120px;
      height: 42px;
      margin-left: 40px;
      background-image: url("../assets/bckImg/confirm.png");

      /* border: 1px solid red; */
    }
    .confirm-btn:hover {
      cursor: pointer;
    }
    .confirm-btn:active {
      background: rgba($color: #2191ffff, $alpha: 90%);
      cursor: pointer;
    }
    .cancellation-btn {
      width: 120px;
      height: 42px;
      margin-left: 150px;
      background-image: url("../assets/bckImg/cancellation.png");

      /* border: 1px solid red; */
    }
    .cancellation-btn:hover {
      cursor: pointer;
    }
    .cancellation-btn:active {
      background: rgba($color: #a9aeb8ff, $alpha: 90%);
      cursor: pointer;
    }
  }
}
.alarm-item {
  .el-input__wrapper {
    background: #f7f8faFF;
  }
}
</style>